<!-- 设备管理 -->
<template>
  <div class="dashboard-container">
    <!-- 搜索框 -->
    <search label="设备编号：" @searchInnerCode="searchFn" />
    <!-- 表格 -->
    <el-card shadow="never">
      <el-row class="btn">
        <el-col>
          <el-button type="warning" style="min-width:80px;height:36px;" @click="newEqiupment"><i class="el-icon-circle-plus-outline" style="margin-right:5px;" />新建</el-button>
          <el-button class="handle" style="min-width:80px;height:36px;" @click="moreOperation">批量操作</el-button>
        </el-col>
      </el-row>

      <Table :loading="loading" :is-select="true" :table-data="equipmentList" :page="page" :labels="labels" @getSelectVal="getSelectVal">
        <template #vmStatus="{scope}">
          {{ equipmentStatus(scope) }}
        </template>
        <template #operation="{scope}">
          <el-button @click="setList(scope)">货道</el-button>
          <el-button @click="checkPolicy(scope)">策略</el-button>
          <el-button @click="editFn(scope)">修改</el-button>
        </template>
      </Table>
      <page :total="+list.totalCount" :current-page.sync="page.pageIndex" :total-page="+list.totalPage" />
    </el-card>
    <!-- 弹出框 -->
    <EMDialog :show-dialog.sync="showDialog" :type-list="typeList" :order-list="orderList" @addEquipment="getEquipmentList" />
    <editDialog
      v-if="orderList.length>0"
      :equipment-id="id"
      :show-edit-dialog.sync="showEditDialog"
      :equipment-list="editEquipmentList"
      :order-list="orderList"
      :equipment-node-id="nodeId"
      @editEquipment="getEquipmentList"
    />
    <OperationDialog :show-operation-dialog.sync="showOperationDialog" :select-val="selectVal" @addEquipment="getEquipmentList" />
    <findPolicyDialog :showfind-policy-dialog.sync="showfindPolicyDialog" :policy-list="policyList" @addEquipment="getEquipmentList" />
    <setListDialog :business-id="businessId" :inner-code="innerCode" :show-set-list-dialog.sync="showSetListDialog" :set-type-list="setTypeList" :detail-list="detailList" @updateList="getEquipmentList" />
  </div>
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import search from '@/components/equipment/search.vue'
import { getEquipmentList } from '@/api/equipment'
import Table from '@/components/equipment/table'
import page from '@/components/equipment/page'
import EMDialog from './components/EMDialog.vue'
import { getEquipmenTypetList, getOrderList, getequipmentList, getequipmentDetail } from '@/api/equipment'
import editDialog from './components/editDialog.vue'
import OperationDialog from './components/OperationDialog.vue'
import { searchPolicy } from '@/api/policy'
import findPolicyDialog from './components/findPolicyDialog.vue'
import setListDialog from './components/setListDialog.vue'

export default {
  name: 'EquipmentManagement',
  components: { search, Table, page, EMDialog, editDialog, OperationDialog, findPolicyDialog, setListDialog },
  props: {
  },
  data() {
    return {
      loading: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        innerCode: null
      },
      typePage: {
        pageIndex: 1,
        pageSize: 100000
      },
      list: {},
      labels: {
        innerCode: '设备编号',
        'type.name': '设备型号',
        'node.name': '详细地址',
        'node.ownerName': '合作商',
        'vmStatus': '设备状态'
      },
      equipmentList: [],
      showDialog: false,
      showEditDialog: false,
      showOperationDialog: false,
      showfindPolicyDialog: false,
      showSetListDialog: false,
      typeList: [],
      orderList: [],
      editEquipmentList: [],
      id: '',
      nodeId: '',
      selectVal: [],
      policyList: {},
      setTypeList: {},
      detailList: [],
      arr: [],
      innerCode: '',
      businessId: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {
    equipmentStatus() {
      return ({ vmStatus }) => {
        if (vmStatus === 0) {
          return '未投放'
        } else if (vmStatus === 1) {
          return '运营'
        } else {
          return '撤机'
        }
      }
    }
  },
  // 监控data中的数据变化
  watch: {
    page: {
      deep: true,
      handler() {
        this.getEquipmentList()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getEquipmentList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    async getEquipmentList() {
      this.loading = true
      const { data } = await getEquipmentList(this.page)
      this.equipmentList = data.currentPageRecords
      this.list = data
      this.loading = false
    },
    newEqiupment() {
      this.showDialog = true
      this.getEquipmenTypetList()
      this.getOrderList()
    },
    async getEquipmenTypetList() {
      const { data: { currentPageRecords }} = await getEquipmenTypetList(this.typePage)
      this.typeList = currentPageRecords
    },
    async getOrderList() {
      const { data: { currentPageRecords }} = await getOrderList(this.typePage)
      this.orderList = currentPageRecords
    },
    searchFn(item) {
      this.page.innerCode = item
      this.getEquipmentList()
    },
    editFn(scope) {
      this.id = scope.id
      this.nodeId = scope.node.id
      this.editEquipmentList = scope
      const str = scope.lastSupplyTime.replace('T', ' ')
      this.editEquipmentList.lastSupplyTime = str
      this.showEditDialog = true
      this.getOrderList()
    },
    moreOperation() {
      this.showOperationDialog = true
    },
    getSelectVal(val) {
      this.selectVal = val
    },
    async checkPolicy(scope) {
      const data = await searchPolicy(scope.innerCode)
      console.log(data.data)
      if (data.data === '') {
        this.selectVal = [scope]
        this.showOperationDialog = true
      } else {
        this.showfindPolicyDialog = true
        this.policyList = data.data
      }
    },
    async setList(scope) {
      // console.log(scope)
      this.showSetListDialog = true
      this.innerCode = scope.innerCode
      this.businessId = scope.businessId
      const data = await getequipmentList(scope.type.typeId)
      const res = await getequipmentDetail(scope.innerCode)
      this.setTypeList = data.data
      this.detailList = res.data
      console.log(this.innerCode)
    }
  }
}
</script>
<style scoped lang='scss'>
  .btn{
    margin-bottom: 20px;
  }
.handle{
  background: #fbf4f0;
  border: none;
  width: 80px;
}
.el-button{
  padding: 0 !important;
  border: none;
}
.cell{
  .el-button--default{
  color: #5f84ff;
}
}
::v-deep .el-dialog__header{
  font-weight: 600;
  span{
    font-size: 16px;
    line-height: 22px;
  }
}
::v-deep .el-dialog {
    border-radius: 10px;
    width: 630px;
}
::v-deep .el-select{
  width: 396px;
}
.el-form-item{
  margin-bottom: 0;
}
</style>
